<template>
  <!--  https://www.naiveui.com/zh-CN/os-theme/components/menu-->
  <n-menu
      :mode="'vertical'"
      @update:value="handleMenuSelect"
      :options="sideMenuOptions"
  />
</template>


<script setup>
import {NIcon, NMenu} from "naive-ui";
import {
  BookNumber24Filled,
  BookNumber24Regular,
  Folder20Filled,
  Folder20Regular,
  History16Filled,
  History16Regular,
  PhoneTablet20Filled,
  PhoneTablet20Regular,
  Settings24Filled,
  Settings24Regular,
  Toolbox20Filled,
  Toolbox20Regular
} from "@vicons/fluent";
import {h, reactive} from "vue";
import {pubEvent} from "../api/event.js";
import { useRouter } from 'vue-router'

const router = useRouter()

function renderIcon(icon) {
  return () => h(NIcon, null, {default: () => h(icon)});
}

const sideMenuOptions = reactive([
  {
    label: '代理',
    key: 'proxy',
    icon: renderIcon(PhoneTablet20Regular),
    icon2: [PhoneTablet20Regular, PhoneTablet20Filled],
    component: 'Conn',
    inverted: true
  },
  {
    label: 'API',
    key: 'apis',
    icon: renderIcon(Folder20Regular),
    icon2: [Folder20Regular, Folder20Filled],
    component: 'Nodes',
    inverted: false
  },
  {
    label: '变量',
    key: 'vars',
    icon: renderIcon(BookNumber24Regular),
    icon2: [BookNumber24Regular, BookNumber24Filled],
    component: 'Index',
  },
  {
    label: '历史',
    key: 'history',
    icon: renderIcon(History16Regular),
    icon2: [History16Regular, History16Filled],
    component: 'Rest',
  },
  {
    label: '工具',
    key: 'toolbox',
    icon: renderIcon(Toolbox20Regular),
    icon2: [Toolbox20Regular, Toolbox20Filled],
    component: 'Task',
  },
  {
    label: '设置',
    key: 'setting',
    icon: renderIcon(Settings24Regular),
    icon2: [Settings24Regular, Settings24Filled],
    component: 'Settings'
  }
])

const handleMenuSelect = (key, item) => {
  if (key === 'theme') {
    return
  }
  router.replace('/' +key )
  pubEvent('menu_select', key)
  for (let x of sideMenuOptions) {
    x.icon = renderIcon(x.key === key ? x.icon2[1] : x.icon2[0]);
  }
}

</script>

<style>

</style>